<template>
	<!-- 热卖商品 -->
	<view class="products-area  m-t">
		<view class="container">
			<view class="row">
				<view class="col-12">

					<!-- section title -->
					<view class="section-title space-mb--20">
						热卖商品
						<navigator class="more" url="/">
							More
							<text class="iconfont icon-arrow-right"></text>
						</navigator>
					</view>

					<!-- all products -->
					<view class="all-products-wrapper space-mb-m--20">
						<view class="row">

							<view class="col-6">
								<view class="grid-product space-mb--20">
									<view class="grid-product__image">
										<navigator url="/">
											<image src="@/static/img/products/product1.png" mode="widthFix" alt="商品列表"></image>
										</navigator>
										<button class="icon">
											<text class="iconfont icon-favorites"></text>
										</button>
									</view>
									<view class="grid-product__content">
										<view class="title">
											<navigator url="/">
												Leather Bag
											</navigator>
										</view>
										<text class="category">Bag</text>
										<view class="price">
											<text class="main-price">$460</text>
											<text class="discounted-price">$320</text>
										</view>
									</view>
								</view>
							</view>

							<view class="col-6">
								<view class="grid-product space-mb--20">
									<view class="grid-product__image">
										<navigator url="/">
											<image src="@/static/img/products/product4.png" mode="widthFix" alt="商品列表"></image>
										</navigator>
										<button class="icon">
											<text class="iconfont icon-favorites"></text>
										</button>
									</view>
									<view class="grid-product__content">
										<view class="title">
											<navigator url="/">
												Leather Bag
											</navigator>
										</view>
										<text class="category">Bag</text>
										<view class="price">
											<text class="main-price">$460</text>
											<text class="discounted-price">$320</text>
										</view>
									</view>
								</view>
							</view>

						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		// options: {
		//    styleIsolation: 'isolated'
		// },
		// TODO: 获取数据动态渲染
		data() {
			return {
				// key: value
			}
		},
	}
</script>

<style lang="scss">
	.space-mb--20 {
		margin-bottom: 40upx;
	}

	.row {
		display: flex;
		flex-wrap: wrap;
		margin-right: -30upx;
		margin-left: -30upx;
	}

	.col-6,
	.col-12 {
		position: relative;
		width: 100%;
		padding-right: 15px;
		padding-left: 15px;

	}

	.products-area {
		background: #fff;

		// 两边间距
		.container {
			width: 100%;
			padding-right: 30upx;
			padding-left: 30upx;
			margin-right: auto;
			margin-left: auto;



			.col-12 {
				flex: 0 0 100%;
				max-width: 100%;


				// title
				.section-title {
					font-size: 36upx;
					position: relative;
					font-weight: 500;
					line-height: 1;
					margin-top: 20upx;
					// margin-bottom: 0;
					color: #000000;

					.more {
						font-size: 24upx;
						font-weight: 400;
						position: absolute;
						top: 50%;
						right: 10upx;
						transform: translateY(-50%);
						text {
							vertical-align: middle;
						}
					}
				}

			}

			// 列表
			.all-products-wrapper {

				// item
				.col-6 {
					flex: 0 0 50%;
					max-width: 50%;

					.grid-product {
						padding: 15px;
						background-color: #F8F9F9;
						box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
							position: relative;
						// 图片
						.grid-product__image {
							// position: relative;//不能定在图片上,要是背景不透明就出问题了
							margin-bottom: 20px;
							text-align: center;

							navigator {
								image {
									vertical-align: middle;
									border-style: none;
									width: 254upx;

									&.img-fluid {
										max-width: 100%;
										height: auto;

									}
								}

							}

							.icon {
								position: absolute;
								top: 4upx;
								right: 4upx;
								width: 50upx;
								height: 50upx;
								padding: 0;
								border: none;
								border-radius: 50%;
								background: none;
								box-shadow: 0 8upx 12upx rgba(0, 0, 0, 0.1);
								
								.icon-favorites {
									position: relative;
									top: -10upx;
									font-size: 40upx;
								}
							}
						}

						// 描述
						.grid-product__content {
							.title {
								font-size: 32upx;
								line-height: 1.3;
								font-weight: 500;
							}

							.category {
								font-size: 24upx;
								line-height: 1;
								margin-bottom: 7px;
								color: #6E6E6E;
							}

							.price {
								font-size: 28upx;
								font-weight: 500;
								line-height: 1;
								color: #00C569;
								margin-top: 8upx;

								.main-price {
									color: #bec7cf;
									text-decoration: line-through;
									margin-right: 30upx;
								}
							}
						}
					}
				}
			}
		}
	}
</style>
